<div class="border">
  <div class="header">
    <span>台站信息</span>
  </div>
  <div class="list">

<!--    <md-slide-toggle
          class="example-margin"
          [color]="primary"
          [checked]="checked">
        自动上报
      </md-slide-toggle>-->
    <div class="reports">
    <button class="report" md-raised-button color="primary" (click)=add()>添加</button>
      <button class="report" md-raised-button color="primary" (click)=reportAll()>上报</button>
      <button class="report" md-raised-button color="primary" (click)=refresh()>刷新</button>
    </div>


    <div class="netSoundSource-container">
      <md-table #table [dataSource]="dataSource">


        <ng-container cdkColumnDef="deleteFlag">

          <md-header-cell style="flex-grow: 0.2;" *cdkHeaderCellDef>
            <md-checkbox  (change)="allSelected($event)" ></md-checkbox>
          </md-header-cell>


          <md-cell *cdkCellDef="let row" style="flex-grow: 0.2;">
            <md-checkbox [(ngModel)]="row.isChecked"></md-checkbox>
          </md-cell>

        </ng-container>

        <ng-container cdkColumnDef="EBRID">
          <md-header-cell *cdkHeaderCellDef>编号</md-header-cell>
          <md-cell *cdkCellDef="let row">
            <span *ngIf="!row.isEdit" mdTooltip="{{row.EBRID}}">{{"..."+ row.EBRID.slice(-8)}}</span>
            <!-- <span *ngIf="!row.isEdit">{{row.EBRID}}</span> -->
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.EBRID" ></span>
          </md-cell>
        </ng-container>

        <!-- Progress Column -->
        <ng-container cdkColumnDef="EBRName">
          <md-header-cell *cdkHeaderCellDef>名称</md-header-cell>
          <md-cell *cdkCellDef="let row">

            <span *ngIf="!row.isEdit"> {{row.EBRName}}</span>
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.EBRName" ></span>
          </md-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container cdkColumnDef="Address">
          <md-header-cell *cdkHeaderCellDef>地址</md-header-cell>
          <md-cell *cdkCellDef="let row" >

            <span *ngIf="!row.isEdit"> {{row.Address}}</span>
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.Address" ></span>
          </md-cell>
        </ng-container>

        <!-- Color Column -->
        <ng-container cdkColumnDef="Contact">
          <md-header-cell *cdkHeaderCellDef style="flex-grow: 0.3">联系人</md-header-cell>
          <md-cell *cdkCellDef="let row"  style="flex-grow: 0.3">
            <span *ngIf="!row.isEdit"> {{row.Contact}}</span>
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.Contact" ></span>

          </md-cell>
        </ng-container>

        <!-- Progress Column -->
        <ng-container cdkColumnDef="PhoneNumber">
          <md-header-cell *cdkHeaderCellDef style="flex-grow: 0.3">电话</md-header-cell>
          <md-cell *cdkCellDef="let row"  style="flex-grow: 0.3">
            <span *ngIf="!row.isEdit">{{row.PhoneNumber}}</span>
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.PhoneNumber" ></span>

          </md-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container cdkColumnDef="Longitude">
          <md-header-cell *cdkHeaderCellDef style="flex-grow: 0.3">经度</md-header-cell>
          <md-cell *cdkCellDef="let row"  style="flex-grow: 0.3">
            <span *ngIf="!row.isEdit">{{row.Longitude}}</span>
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.Longitude" ></span>

          </md-cell>
        </ng-container>

        <!-- Color Column -->
        <ng-container cdkColumnDef="Latitude">
          <md-header-cell *cdkHeaderCellDef style="flex-grow: 0.3">纬度</md-header-cell>
          <md-cell *cdkCellDef="let row"  style="flex-grow: 0.3">
            <span *ngIf="!row.isEdit">{{row.Latitude}}</span>
            <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.Latitude" ></span>

          </md-cell>
        </ng-container>



        <ng-container cdkColumnDef="operation">
          <md-header-cell *cdkHeaderCellDef style="flex-grow: 0.7">操作</md-header-cell>

          <md-cell *cdkCellDef="let row"  style="flex-grow: 0.7">
            <button md-mini-fab style="width:25px;height:25px;" *ngIf="!row.isEdit"(click)="edit(row)" >
            <md-icon style="color: #fff;font-size: 18px; padding: 0px;">edit</md-icon>
          </button>
            <button  md-mini-fab style="width:25px;height:25px;" *ngIf="row.isEdit" (click)="finish(row)"  >
              <md-icon style="color: #fff;font-size: 18px; padding: 0px;">check</md-icon>
            </button>
            <button  md-mini-fab style="width:25px;height:25px;" (click)="delete(row)"  >
              <md-icon style="color: #fff;font-size: 18px; padding: 0px;">delete</md-icon>
            </button>

          </md-cell>
        </ng-container>

        <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
      </md-table>
      <md-paginator #paginator
                    [length]="soundSourceDatabase.data.length"
                    [pageIndex]="0"
                    [pageSize]="10"
                    [pageSizeOptions]="[5, 10, 15, 20]">
      </md-paginator>
    </div>

  </div>
</div>
